<template>
  <view class="all-city">
    <view v-for="item in formattedData" :key="item.index">
      <text id="dom">{{ item.index }}</text>
      <view class="city" v-for="city in item.list" :key="city.name" @click="cityClick(city.name)">
        {{ city.name }}
      </view>
    </view>
    <view class="alphabet" id="alphabet">
      <view
        class="letter"
        v-for="(item, index) in englishLetters"
        :key="item"
        @click="letterClick(index)"
        @touchstart="touchstart"
        @touchmove="touchmove"
        @touchend="touchend"
      >
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
import request1 from '../../../network/request1.js';
export default {
  name: 'AllCity',
  data() {
    return {
      initialCitiesData: [],
      englishLetters: [],
      formattedData: [],
      allDoms: [],
      isTouch: false,
      alphabetTop: 0,
      //节流开关
      flag: true
    };
  },
  created() {
    this.getAllCity();
    this.$nextTick(() => {});
  },
  methods: {
    async getAllCity() {
      const { data } = await request1('/gateway', { k: 5109090 });
      this.initialCitiesData = data.cities;
      this.cityFormatted();
    },
    cityFormatted() {
      let formattedData = [];

      // 快速生成26个英文字母
      for (let i = 65; i <= 90; i++) {
        const classify = this.initialCitiesData.filter(
          item => item.pinyin.substr(0, 1).toUpperCase() === String.fromCharCode(i)
        );
        if (!classify.length) {
          continue;
        } else {
          formattedData.push({
            index: String.fromCharCode(i),
            list: classify
          });
        }
      }
      this.formattedData = formattedData;
      this.englishLetters = this.formattedData.map(item => item.index);
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query
          .selectAll('#dom')
          .boundingClientRect(data => {
            this.allDoms = data.map(item => item.top);
          })
          .exec();
      }, 500);
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#alphabet')
          .boundingClientRect(data => {
            this.alphabetTop = data.top;
          })
          .exec();
      }, 500);
    },
    letterClick(index) {
      this.$emit('scrollTo', {
        title: this.englishLetters[index],
        top: this.allDoms[index]
      });
    },
    cityClick(name) {
      uni.setStorageSync('city', name);
      uni.reLaunch({ url: '/pages/City/City' });
    },
    touchstart() {
      this.isTouch = true;
    },
    touchmove(e) {
      if (this.flag) {
        setTimeout(() => {
          let moveY = e.changedTouches[0].pageY - this.alphabetTop;
          if (this.isTouch) {
            if (moveY < 20) {
              this.$emit('scrollTo', {
                title: this.englishLetters[0],
                top: this.allDoms[0]
              });
            } else {
              let index = parseInt(moveY / 20);
              if (index > this.englishLetters.length - 1) {
                index = this.englishLetters.length - 1;
              }
              console.log(index);
              this.$emit('scrollTo', {
                title: this.englishLetters[index],
                top: this.allDoms[index]
              });
            }
          }
          this.flag = true;
        }, 150);
      }
      this.flag = false;
    },
    touchend() {
      this.isTouch = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.all-city {
  color: #eee;
  background: #100f1f;
  font-size: 26rpx;
  padding: 0 20rpx;
  .city {
    background: #171827;
    height: 60rpx;
    line-height: 60rpx;
    margin-bottom: 2rpx;
  }
}
.alphabet {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  .letter {
    height: 40rpx;
    width: 40rpx;
    text-align: center;
    line-height: 40rpx;
  }
}
</style>
